﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        ul li {
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>
</head>
<body>
    <input type="button" id="btn1" value="添加" />
    <ul id="ul1">
        <li id="Li1">111</li>
        <li id="Li2">222</li>
        <li id="Li3">333</li>
    </ul>
</body>
</html>
<script>
    var num = 1;
    document.getElementById("btn1").onclick = function () {
        $("#ul1").append($("<li id='" + num + "'>New--" + num + "</li>"));
        num++;
    }

    document.getElementById("ul1").onclick = function () {
        var e = event || window.event;

        if (e.srcElement) {
            if (e.srcElement.tagName.toLowerCase() == "li") {
                alert(e.srcElement.id);
            }
        }
        else {
            if (e.target.tagName.toLowerCase() == "li") {
                alert(e.target.id);
            }
        }
    }
</script>
